<template>
  <div class="register">
    <div class="wrap clearfix">
      <form-wrap :title="title">
        <div slot="form">
          <i-Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
            <FormItem label="Name" prop="name" :label-width="80" class="input-item">
              <i-Input v-model="formValidate.name" placeholder="Enter your name"></i-Input>
            </FormItem>

            <FormItem label="password" prop="password" :label-width="80" class="input-item">
              <i-Input v-model="formValidate.password" placeholder="Enter your e-mail"></i-Input>
            </FormItem>

            <FormItem label="rpassword" prop="rpassword" :label-width="80" class="input-item">
              <i-Input v-model="formValidate.rpassword" placeholder="Enter your e-mail"></i-Input>
            </FormItem>

            <FormItem label="E-Mail" prop="mail" :label-width="80" class="input-item">
              <i-Input v-model="formValidate.mail" placeholder="Enter your e-mail"></i-Input>
            </FormItem>

            <FormItem label="phone" prop="phone" :label-width="80" class="input-item">
              <i-Input v-model="formValidate.phone" placeholder="Enter your e-mail"></i-Input>
            </FormItem>

            <div class="fast-click input-item">
              已有账号？？
              <router-link class="link" to="/login">
                立即登陆
              </router-link>
            </div>

            <FormItem class="button-wrap">
              <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
              <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
            </FormItem>
          </i-Form>
        </div>
      </form-wrap>

      <router-view></router-view>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import formWrap from 'base/form-wrap/form-wrap'

  export default {
    data() {
      let _this = this
      let validatePass = function(rule, value, callback) {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          callback()
        }
      }

      let validatePassCheck = function(rule, value, callback){
        if (value === '') {
          return callback(new Error('请再次输入密码'));
        } else if (value !== _this.formValidate.password) {
          return callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      }

      let  validateuser = function(rule, value, callback){
        if(!value){
          return callback(new Error("请输入用户名"))
        }else if(!/^[a-zA-Z\d]+$/.test(value)){
          return callback(new Error("请正确输入用户名"))
        }else{
          callback()
        }
      }

      let  validatenick = function(rule, value, callback){
        if(!value){
          return callback(new Error("请输入用户名称"))
        }else if(!/^[\u4e00-\u9fa5]+$/.test(value)){
          return callback(new Error("请正确输入用户名称"))
        }else{
          callback()
        }
      }

      let validateEmail = function (rule, value, callback) {
        if(!value){
          return callback(new Error("请输入邮箱"))
        }else if(!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/.test(value)){
          return callback(new Error("请正确输入邮箱"))
        }else{
          callback()
        }
      }

      let validatePhone = function (rule, value, callback) {
        if(!value){
          return callback(new Error("请输入手机号码"))
        }else if(!/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/.test(value)){
          return callback(new Error("请正确输入手机号码"))
        }else{
          callback()
        }
      }

      return {
        title: '用户注册',
        formValidate: {
          name: '',
          mail: '',
          password: '',
          rpassword: '',
          phone: ''
        },
        ruleValidate: {
          name: [{validator: validateuser, trigger: 'blur'}],
          nick: [{validator: validatenick, trigger: 'blur'}],
          password: [{validator: validatePass, trigger: 'blur'}, {min: 6, message: '请输入最少6位'}],
          rpassword: [{validator: validatePassCheck, trigger: 'blur'}, {min: 6, message: '请输入最少6位'}],
          mail: [{validator: validateEmail, trigger: 'blur'}, {min: 15, message: '请输入最少15位'}],
          phone: [{validator: validatePhone, trigger: 'blur'}, {min: 11, message: '请输入最少11位'}]
        }
      }
    },
    created() {

    },
    methods: {
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!');
          } else {
            this.$Message.error('Fail!');
          }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields();
      }
    },
    components: {
      formWrap
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .input-item
    padding-right: 40px
  .fast-click
    hh(20px)
    margin-bottom: 10px
    text-align: right
    .link
      sc($font-medium, $vice-color)
      &:hover
        text-decoration: underline
  .button-wrap
    padding-top: 10px
    text-align: center
</style>
